<template>
  <div class="layout-aside-container">
    <!-- 左侧边栏列表 -->
    <ul class="menu">
      <li class="menu-item" v-for="(item, index) in list" :key="index" @click="jump(item.src)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  data() {
    return {
      list: [
        { name: '学生管理', src: 'studentList'},
        { name: '课程管理', src: 'classList'},
        // { name: 'myDemo', src: 'myDemo'},
        { name: '作业管理', src: 'workList'}
      ]
    }
  },
  methods: {
    jump(path) {
      this.$router.push({ name: path })
    }
  }
}
</script>

<style scoped>
.layout-aside-container {
  width: 250px;
  height: 100%;
  border-right: 1px solid #eaeaea;
}

.menu {
  list-style-type: none;
  padding: 0;
}

.menu .menu-item {
  line-height: 50px;
  font-weight: bold;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.menu .menu-item:hover {
  background-color: #efefef;
  cursor: pointer;
}

.menu .menu-item a {
  display: block;
  color: black;
  padding-left: 30px;
}

.menu .menu-item a:hover {
  text-decoration: none;
}

/* 设置路由高亮效果 */
.router-link-active {
  background-color: #efefef;
  box-sizing: border-box;
  position: relative;
}

.router-link-active::before {
  content: ' ';
  display: block;
  width: 4px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #42b983;
}
</style>